<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定时器-图片</title>
</head>
<style>
    img {
        display: none;
    }

    .ls {
        display: block;
    }
</style>

<body>
    <div>
        <img src="imgs/001.jpg" alt="" class="ls">
        <img src="imgs/002.jpg" alt="">
        <img src="imgs/003.jpg" alt="">
        <img src="imgs/004.jpg" alt="">
    </div>

    <button id="btn">开始</button>
    <button id="btn1">结束</button>

    <script>
        // var img = document.querySelector('img')
        var imgs = document.querySelectorAll('img')

        var num = 0;
        function lunbo() {

            // 11111111111111111
            // num++;
            // if(num>4){
            //     num = 1;
            // }
            // img.src = 'imgs/00'+num+'.jpg'

            //2222222222222222222
            imgs[num].className = ''
            num++;
            if (num > 3) {
                num = 0;
            }
            imgs[num].className = 'ls'
        }

        var times;
        btn.onclick = function () {
            clearInterval(times)
            times = setInterval(lunbo, 1000)
        }
        btn1.onclick = function () {
            clearInterval(times)
        }
    </script>
</body>

</html>